<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!--让此处的显示文本 和 Vue对象中的info变量进行绑定
    绑定后变量的值是什么这里就显示什么-->
    {{info}}
</div>
<!--引入vue框架文件-->
<!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
<script src="js/vue.min.js"></script>

<script>
    //Vue对象相当于是MVVM设计模式中的VM,负责将页面中可能发生改变的元素和变量进行绑定
    //并且会在内存中不断监听变量值的改变, 当值发生改变时会自动找到对应的页面位置将页面
    //中的内容一起改动
    let v = new Vue({
        el:"body>div", //设置被Vue对象所管理的元素范围
        data:{//在data里面定义和元素绑定的变量
            info:"Hello Vue!"
        }
    })
</script>
</body>
</html>